<template>
  <div class="app-container">
    <!--查询条件开始-->
     <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

      <el-form-item label="所属班级" prop="interviewTeacher">
        <el-select
          v-model="queryParams.classId"
          placeholder="所属班级"
          clearable
          size="small"
          style="width:240px"
        >
          <el-option
            v-for="c in ClassOptions"
            :key="c.classId"
            :label="c.className"
            :value="c.classId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="访谈时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width:240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholde="开始日期"
          end-placeholde="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button @click="exportData" type="success" icon="el-icon-download">导出数据</el-button>
      </el-form-item>
    </el-form>

    <!--查询条件结束-->

    <!--表头按钮开始-->
    <el-row :gutter="10" style="margin-bottom: 8px;">


    </el-row>
    <!--表头按钮结束-->

    <!--表格数据开始-->
    <el-table id="out-table" v-loading="loading" border :data="InterviewTableList">
      <el-table-column label="学生姓名" align="center" prop="studentId"  :formatter="studentIdFormatter" width="180"/>
      <el-table-column label="学生班级" align="center" prop="className"  width="180"/>
      <el-table-column label="访谈老师" align="center" prop="interviewTeacher"  :formatter="teacherFormatter" width="100"/>
      <el-table-column label="访谈情况" align="center" prop="interviewDesc">
        <!--<template slot-scope="scope">

         <el-popover
                    placement="top-start"
                    width="400"
                    trigger="hover">
                    <p style="color:#14d36a;">{{ scope.row.interviewDesc }}</p>

                  </el-popover>

         <el-button slot="reference" type="text">{{ scope.row.interviewDesc | ellipsis }}</el-button>
        </template> -->
      </el-table-column>
      <el-table-column label="访谈内容(点击查看详情)" align="center" prop="interviewContent" >
        <template slot-scope="scope">
         <!-- <el-popover
            placement="top-start"
            width="400"
            trigger="hover">
            <p style="color:#14d36a;">{{ scope.row.interviewContent }}</p>
            <el-button slot="reference"  @click="opent(scope.row.interviewContent)" type="text">{{ scope.row.interviewContent | ellipsis }}</el-button>
          </el-popover>
           -->
          <el-button slot="reference"  @click="opent(scope.row.interviewContent)" type="text">{{ scope.row.interviewContent | ellipsis }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="访谈时间" align="center" prop="interviewTime" width="180">
        <template slot-scope="scope">
          {{formatDateNew(scope.row.interviewTime, '{y}-{m}-{d}')}}
        </template>
      </el-table-column>
    </el-table>

    <!--表格数据结束-->
      <el-dialog
        title="访谈详情"
        :visible.sync="ContentOpen"
        width="30%" heigth="50%">
        <span style="font-size:17px;">{{concent}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="ContentOpen  = false">确 定</el-button>
        </span>
      </el-dialog>


    <!--分页插件开始-->
    <el-pagination
      v-show="total>0"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 30,50,100]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!--分页插件结束-->

    <!--添加修改弹出层开始-->
    <!-- <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      center
      append-to-body
      :show-close="show"
      :close-on-click-modal="closeonclickmodal"
    >
    <el-row>
      <el-col :span="24">
        <h3>班级选择:</h3>
         <el-button
          v-for="c in ClassOptions"
            :key="c.classId"
            @click="classclick(c.classId)"
         >{{c.className}}
         </el-button>
      </el-col>
      <el-col :span="24" v-if="classValue" >
         <h3>学生选择:</h3>
         <el-button
          v-for="s in studentOptions"
            :key="s.id"
            @click="studentclick(s.id)"
         >{{s.stuName}}
         </el-button>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible">确 定</el-button>
  </div>
    </el-dialog> -->

    <!--添加修改弹出层失败-->


  </div>
</template>
<script>
import {listForPage,addInterview} from '@/api/system/Interview'
import {selectAllUser} from '@/api/system/user'
import {getClassByUserCampus} from '@/api/system/class'
import {getStudentByClassId,getAllStudent} from '@/api/system/student'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
    data(){
      return{
        //分配角色是否显示
        selectRoleOpen:true,
        teacherOptions:[],
        ClassOptions:[],
        studentOptions:[],
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          studentId:undefined,
          interviewClass:undefined,
          classId:undefined
        },
        dateRange:[],
        open:true,
        show:false,
        closeonclickmodal:false,
        title:"访谈记录",
        classValue:"",
        InterviewTableList:[],
        loading:false,
        total:0,
        // 访谈内容弹框
        ContentOpen:false,
        //cent
         concent:""

      }
    },
    //钩子
created(){
  selectAllUser().then(res=>{
    this.teacherOptions = res.data
  })
  getClassByUserCampus().then(res =>{
    this.ClassOptions = res.data
  })
  getAllStudent().then(res =>{
    this.studentOptions = res.data
  })
  this.getlistForPage()
},
methods:{
       //分页页大小改变事件
       handleSizeChange(val){
         this.queryParams.pageSize = val
          this.getlistForPage()
       },
       //分页当前页改变事件
       handleCurrentChange(val){
         this.queryParams.pageNum = val
          this.getlistForPage()
       },

      getlistForPage(){
         this.loading=true
        listForPage(this.addDateRange(this.queryParams,this.dateRange))
        .then(res =>{
          console.log(JSON.stringify(res.data))
          //获得请求的数据
          this.InterviewTableList = res.data
          //获得请求的条数
          this.total = res.total
          this.loading=false
        })

      },
      classclick(val){
        if(val){
        this.classValue = val
        getStudentByClassId(val).then(res =>{
            this.studentOptions = res.data
        })
        }
      },
      studentclick(val){
         if(val){
        this.classValue = val
        this.queryParams.studentId = val
        }
      },
      // dialogFormVisible(){
      //     this.getlistForPage()
      //     this.open= false
      // },
      // dialogVisible(){
      //     this.getlistForPage()
      //     this.open= false
      // },
      //模糊查询
    handleQuery(){
      this.getlistForPage()
    },
    //重置
    resetQuery(){
      this.queryParams = {}
      this.getlistForPage()
    },

     //导出数据
      exportData() {
        console.log(document.querySelector('#out-table'))
                 /* generate workbook object from table */
                 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
                 /* get binary string as output */
                 console.log(wb)
                 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                 try {
                     FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '访谈数据.xlsx')
                 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                 return wbout
     },

     //查看
     opent(obj){
     console.log(obj)
          this.ContentOpen=true;
          this.concent=obj

     },


    teacherFormatter(row){
      var actions = []
        Object.keys(this.teacherOptions).map((key) => {
         if (this.teacherOptions[key].userId == row.interviewTeacher) {
          actions.push(this.teacherOptions[key].userName)
           return false
          }
        })
      return actions.join('')
    },

    studentIdFormatter(row){
        var actions = []
        Object.keys(this.studentOptions).map((key) => {
         if (this.studentOptions[key].id == row.studentId) {
          actions.push(this.studentOptions[key].stuName)
           return false
          }
        })
      return actions.join('')
    },

      handleUpdate(row){

      }

},
filters: {
  // 字符串过长过滤处理
  ellipsis(value) {
    if (!value) return "";
   // if (value.length > 20) {
   //   return value.slice(0, 20) + "....";
   // }
    return value;
  },

}

}
</script>
<style scoped >
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
